<template >
  
  <!-- <div class="div1"> -->
    <!-- <div>
      <el-row  :gutter="4" class="panel-group">
            <el-col
              :xs="5"
              :sm="5"
              :lg="6"
              class="card-panel-col"
            >
              <router-link to="/student/list">
              <div
                class="card-panel"
              >
                <div class="card-panel-icon-wrapper icon-people">
                  <svg-icon
                    icon-class="peoples"
                    class-name="card-panel-icon"
                  ></svg-icon>
                </div>
                <div class="card-panel-description">
                  <div class="card-panel-text">学生总数</div>
                  
                    <span :class="'rgb3737170'">
                      <count-to
                        :start-val="0"
                        :end-val="studentCount"
                        :duration="6000"
                        class="card-panel-num"
                      />
                    </span>
                  
                </div>
              </div>
              </router-link>
            </el-col>
          </el-row>
    </div> -->


      <!-- <ve-pie ref="chart_one" :data="chartData" :settings="chartSettings" width="100%" height="100%" ></ve-pie> -->
      

  <!-- </div> -->
  <div>
    
  </div>
</template>

<script>
import store from "@/store";
import CountTo from "vue-count-to";
import VeLine from "v-charts/lib/line";
import moment from "moment";
import VePie from "v-charts/lib/pie";
import {getStudentCount, getAnalysisSex} from '@/api/student';


export default {
  components: {
    CountTo,
    VeLine,
    VePie
  },
  data() {
    /* this.chartSettingsPie = {
      offsetY: 120,
    }; */
    return {
      studentCount: 0,
      mystore:'',
      piesex: {
        chartData: {},
      },
      chartSettings: { offsetY: 120 },
      chartData: {
        columns: ['key', 'value'],
        rows: [
          { 群体: "60之前", 客户: 1393 },
          { 群体: "60后", 客户: 3530 },
        ]
      },
      /* chartData: {
          columns: ["ageGroup", "countAge"],
          rows: [
            { 群体: "60之前", 客户: 1393 },
            { 群体: "60后", 客户: 3530 },
            { 群体: "70后", 客户: 2923 },
            { 群体: "80后", 客户: 1723 },
            { 群体: "90后", 客户: 3792 },
            { 群体: "00后", 客户: 4593 },
          ],
        }, */
    };
  },
  created() {
    this.$nextTick(() => {
      this.$refs.chart_one.echarts.resize()
    });

    //this.getStudentCount();
    //this.getAnalysisSex();
  },
  methods: {
    viewStore() {
      let data = store.getters;
      for (var item in data) {
        if (!(item == "routers" || item == "addRouters")) {
          this.mystore = this.mystore + "\n" + item + ":" + data[item];
        }
      }
    },
    getStudentCount() {
      getStudentCount().then(rsp => {
        if (rsp.code === 0) {
          this.studentCount = rsp.data;
        } else {
          this.$message.error(rsp.msg);
        }
      });
    },
    getAnalysisSex() {
      getAnalysisSex().then(rsp => {
        if (rsp.code === 0) {
          this.piesex.chartData.rows = rsp.data;
        }
      });
    },
  },
};
</script>

<style  rel="stylesheet/scss" lang="scss" scoped >
.text-wrapper {
  white-space: pre-wrap;
}
.div1 {
  padding: 10px 10px 0px 10px;
  background-color: #f0f2f5;
}
.div2 {
  padding: 10px 10px 0px 10px;
  background-color: white;
}
.ve-line-style {
  width: 100%;
  background: #fff;
}
.ve-line{
  width: 100%;
  height: 320px;
}
.panel-group {
  // margin-top: 18px;
  .card-panel-col {
    margin-bottom: 32px;
  }
  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);
    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }
      .icon-people {
        background: #40c9c6;
      }
      .icon-message {
        background: #36a3f7;
      }
      .icon-money {
        background: #f4516c;
      }
      .icon-shopping {
        background: #34bfa3;
      }
    }
    .icon-people {
      color: #40c9c6;
    }
    .icon-message {
      color: #36a3f7;
    }
    .icon-money {
      color: #f4516c;
    }
    .icon-shopping {
      color: #34bfa3;
    }
    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }
    .card-panel-icon {
      float: left;
      font-size: 48px;
    }
    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;
      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }
      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}
.rgb3737170 {
  color: rgb(37, 37, 170);
}
</style>
